<script setup>
import { ref, watch, onMounted } from 'vue'
import { Search } from '@element-plus/icons-vue'
import axios from 'axios'
import { rightPage, addInfo, judgeIsFriend, judgeIsAddGroup } from '../../stores/page'
import { getFriendHeadShot } from '../../stores/getFriend'
import { getAllGroupMember } from '@/stores/group'

const input = ref('')
const searchList = ref([])


function search() {
    rightPage.value = 0
    if(type.value.label === '用户'){
    axios({
        method: 'get',
        url : "https://47.120.69.214:8787/user/getByPhoneOrId",
        params: {
            "num" : input.value
        }
    }).then(response => {
        searchList.value = response.data
    })
    .catch(error => console.log(error))
}
else if(type.value.label === '群聊'){
    axios({
        method: 'get',
        url : "https://47.120.69.214:8787/group/getById",
        params: {
            "groupId" : input.value
        }
    }).then(response => {
        searchList.value = []
        if(response.data !== ""){
            searchList.value.push(response.data)
        }

    })
    .catch(error => console.log(error))
}
}

function show(item){
    addInfo.value = item
    if(type.value.label === '用户'){
        judgeIsFriend()
        // 切换页面
        rightPage.value = 3
    }
    else if (type.value.label === '群聊'){
        judgeIsAddGroup()
        getAllGroupMember()
        // 切换页面
        rightPage.value = 4
    }
}

//选择
const type = ref({ id: 3, label: '类型' })
const options = ref([
  { id: 1, label: '用户' },
  { id: 2, label: '群聊' }
])

watch(() => type.value, () => {
    input.value = ''
    searchList.value = []
    rightPage.value = 0 
})



</script>

<template>
    <!-- 中部 -->
    <el-container style="position:fixed;top:0;border : solid 1px;">
       <!--  搜索   -->
        <el-header style="height: 8vh; width:30vw;">
        <div>
            <el-select
      v-model="type"
      value-key="id"
      placeholder="类型"
      style="width: 6vw; margin-left:-1%"
    >
      <el-option
        v-for="item in options"
        :key="item.id"
        :label="item.label"
        :value="item"
      />
    </el-select>
            <el-input v-model="input" style="width:18vw;margin : 5% 3%;" placeholder="输入ID或电话号码搜索" v-if="type.label === '用户'" />
            <el-input v-model="input" style="width:18vw;margin : 5% 3%;" placeholder="输入ID搜索" v-else-if="type.label === '群聊'"/>
            <el-input v-model="input" style="width:18vw;margin : 5% 3%;" placeholder="搜索" v-else/>
            <el-button @click='search()' :icon="Search" circle />
        </div>
       </el-header>
      <!-- 用户列表 -->
         <el-main >
            <el-scrollbar height = 91.5vh>
          <el-menu >
          <div v-for="item in searchList" :key="item" class=".scrollbar-demo-item" >
              <el-menu-item style="border-bottom:solid 1px;" @click="show(item);" :index="item.name" >
        <el-avatar shape="square" :size="50" :src="getFriendHeadShot(item.headShotUrl)"   />
                <p style="font-size:20px; margin-left:10%">{{ item.name }}</p>
              </el-menu-item>   
          </div>
          </el-menu>
        </el-scrollbar>
       </el-main>

    </el-container> 
    <p></p>



</template>

<style scoped>
header{
    background : rgb(237, 237, 232);
}
</style>